<template>
	<view>
		<common-navabar :title="navbarTitle" :bgColor="'#ffffff'" :borderBottom="true"></common-navabar>
		<view class="u-p-20" style="background-color: #ffffff;">
			<u-form :model="address" ref="uForm" label-width="130" label-align="center">
					<u-form-item label="联系人" prop="linkMan">
						<u-input v-model="address.linkMan"  placeholder="请输入联系人"/>
					</u-form-item>
					<u-form-item label="性别" prop="sexLabel">
						<u-radio-group v-model="address.sexLabel" active-color="#f29100" @change="sexLabelChange" width="150rpx">
							<u-radio 
									v-for="(item, index) in sexList" :key="index" :name="item.name" :disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="手机号" prop="mobile">
						<u-input v-model="address.mobile"  placeholder="请输入手机号"/>
					</u-form-item>
					<u-form-item label="地址" right-icon="arrow-right" prop="addressInfo" @click.native="toChooseAddr()">
						<u-input v-model="address.addressInfo" type="text" @input="addressInfoChange"/>
					</u-form-item>
					<u-form-item label="详细信息" prop="addressDetail">
						<u-input v-model="address.addressDetail"   type="text"  placeholder="请输入详细地址"/>
					</u-form-item>
					<u-form-item label="标签" :border-bottom="false" prop="addressTagLabel">
						<u-radio-group v-model="address.addressTagLabel" active-color="#f29100" @change="tagChange" width="150rpx">
							<u-radio v-for="(item, index) in addrTagList" :key="index" :name="item.name" :disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
			</u-form>
		</view>
		<view  class="u-flex u-row-center u-col-center"
			  style="width:100%;height:100rpx;position: absolute;bottom: 20rpx;">
			  <view style="width: 100%;padding: 0rpx 50rpx;">
				  <u-button @click="saveAddress()" shape="circle" type="warning">保存</u-button>
			  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbarTitle:'新增地址',
				address:{
					id:'',
					linkMan:'',
					sexLabel:'先生',
					sexVal:0,
					mobile:'',
					addressInfo:'',
					addressDetail:'',
					latitude:'',
					longitude:'',
					addressTagLabel:'家',
					addressTagVal:0,
					isDefault:false,
				},
				autoAddressInfo:'',
				rules: {
					linkMan: [
						{ 
							required: true, 
							message: '请输入联系人', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					sexLabel: [
						{
							required: true, 
							message: '请选择性别', 
							trigger: 'change'
						}
					],
					addressTagLabel: [
						{
							required: true, 
							message: '请确定地址标签', 
							trigger: ['change','blur'],
						}
					],
					addressInfo:[
						{
							required: true, 
							message: '请确定地址信息', 
							trigger: ['change'],
						}
					],
					addressDetail:[
						{
							required: true, 
							message: '请备注更详细信息', 
							trigger: ['change'],
						}
					],
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				},
				addrTagList:[
					{
						name: '家',
						disabled: false
					},
					{
						name: '公司',
						disabled: false
					},
					{
						name: '学校',
						disabled: false
					}
				],
				sexList:[
					{
						name: '先生',
						disabled: false
					},
					{
						name: '女士',
						disabled: false
					},
				]
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		
		onLoad:function(option){
			let that=this;
			if(option.address!=null&&option.address!=undefined&&option.address.length>0){
				this.navbarTitle="编辑地址";
				let address=JSON.parse(option.address);
				console.log("====编辑的信息=====",address);
				this.address=address;
			}else{
				this.address.mobile=this.vuex_userInfo.mobile;
				this.navbarTitle="新增地址";
			}
		},
		methods:{
			sexLabelChange:function(name){
				let that=this;
				console.log("性别变化",name);
			},
			tagChange:function(name){
				let that=this;
				console.log("标签变化",name);
			},
			toChooseAddr:function(){
				let that=this;
				uni.chooseLocation({
					success:function(res){
						console.log("选择地址",res);
						that.address.addressInfo= res.address;
						that.address.addressDetail=res.name;
						that.address.longitude=res.longitude;
						that.address.latitude=res.latitude;
						that.autoAddressInfo=res.address;
					}
				})	
			},
			addressInfoChange:function(value){
				if(value!=this.autoAddressInfo){
					this.address.latitude="";
					this.address.longitude="";
					console.log("======位置发生变化=======");
				}
			},
			
			saveAddress:function(){
				let that=this;
				that.$refs.uForm.validate(valid => {
					if (valid) {
						if(that.address.sexLabel=='先生'){
							that.address.sexVal=0;
						}else{
							that.address.sexVal=1;
						}
						if(that.address.addressTagLabel=='家'){
							that.address.addressTagVal="0";
						}
						else if(that.address.addressTagLabel=='公司'){
							that.address.addressTagVal="1";
						}else{
							that.address.addressTagVal="2";
						}
						let addressList=that.myAddressList;
						if(that.address.id!=null&&that.address.id!=undefined&&that.address.id.length>0){
							for (let i = 0; i < addressList.length; i++) {
								if(addressList[i].id==that.address.id){
									console.log("修改地址");
									addressList[i]=that.address;
									break;
								}
							}
						}else{
							that.address.id=new Date().getTime().toString();
							console.log("新增地址",addressList);
							if(addressList.length<1){
								console.log("设置默认地址",that.address);
								that.$u.vuex("defaultAddress",that.address);
							}
							addressList.push(that.address);
						}
						console.log("==========地址更新后=========",addressList);
						that.$u.vuex("myAddressList",addressList);
						uni.navigateBack();
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss">

</style>
